<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../../../assets/foodLogo.png" alt="">
      </div>
      <!-- 登录表单区域 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input placeholder="请输入用户名" prefix-icon="el-icon-user-solid" v-model="loginForm.username" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item :inline="true" prop="upassword">
          <el-input  @keyup.enter="login" placeholder="请输入密码" prefix-icon="el-icon-s-goods" v-model="loginForm.password" type="password" />
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script src="../js/login.js"></script>

<style scoped>
  @import "../css/login.css";
</style>
